<template>
  <div id="productIntro">
    <div  class="join-lay">
      <div class="containerset">
        <ul class="tab">
          <li @click="tab(1)" v-bind:class="{active: num==1}">产品介绍</li>
          <li @click="tab(2)" v-bind:class="{active: num==2}">风控服务</li>
        </ul>
      </div>
    </div>
    <div class="aboutCompanypadding">
      <div class="containerset" v-if="num == 1">
        <div class="layer j_layerCon layer-white">
          <div class="layer-about">
            <div class="contain">
              <div class="title">线上平台</div>
              <div class="nav">
                <div class="item">
                  <i class="icon fa fa-apple"></i>
                  <div class="txt">
                    <div class="tit">APP</div>
                    <div class="tip">(IOS/安卓)</div>
                  </div>
                </div>
                <div class="item">
                  <i class="icon fa fa-wechat"></i>
                  <div class="txt txt-inline">
                    <div class="tit">微信端</div>
                  </div>
                </div>
                <div class="item">
                  <i class="icon fa fa-windows"></i>
                  <div class="txt">
                    <div class="tit">WEB</div>
                    <div class="tip">(zjdaopu.com)</div>
                  </div>
                </div>
                <div class="item">
                  <i class="icon fa fa-skyatlas"></i>
                  <div class="txt txt-inline">
                    <div class="tit">Saas软件服务</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="layer-about-more">
            <div class="layer-about-flex">
              <div class="layer-about-flex-top">金融服务供应商</div>
              <div class="layer-about-flex-con">
                稻普担保<br/>
                中国工商银行<br/>
                中国银行<br/>
                杭州联合银行<br/>
                ……<br/>
              </div>
            </div>
            <div class="layer-about-flex">
              <div class="layer-about-flex-top">二手车评估服务
              </div>
              <div class="layer-about-flex-con">
                功达二手车评估<br/>
                上门估价服务<br/>
                ……<br/>
              </div>
            </div>
            <div class="layer-about-flex">
              <div class="layer-about-flex-top">信息平台服务</div>
              <div class="layer-about-flex-con">
                贷款信息查询<br/>
                还款提醒服务<br/>
                ……<br/>
              </div>
            </div>
            <div class="layer-about-flex">
              <div class="layer-about-flex-top">汽车后市场服务</div>
              <div class="layer-about-flex-con">
                出险报案/理赔<br/>
                保险报价/续保<br/>
                代客户办理上牌<br/>
                年检服务<br/>
                ……<br/>
              </div>
            </div>
          </div>
        </div>
        <div class="layer-about">
          <div class="contain">
            <div class="title">合伙人服务</div>
          </div>
          <div class="layer-about-more">
            <div class="layer-about-flex">
              <div class="layer-about-flex-top">车贷分期</div>
              <div class="layer-about-flex-con" style="text-align: left">
                <div style="text-indent: 2em">
                   稻普汽服通过丰富的行业经验、强大的风控能力、一站式代办服务，并且根据购车客户自身资信情况，为其提供个性化的汽车消费贷款购车解决方案。
                </div>
                <div style="text-indent: 2em">
                    服务特点： ①专业性强；②成功率高；③多种合作方式灵活选择。
                </div>
              </div>
            </div>
            <div class="layer-about-flex">
              <div class="layer-about-flex-top">车易订</div>
              <div class="layer-about-flex-con" style="text-align: left">
                <div style="text-indent: 2em">
                  针对优质车商联盟成员，稻普汽服倾力推出“车易订”产品服务，它是一项帮助车商联盟成员解决汽车贸易链环节采购垫款的金融服务。
                </div>
                <div style="text-indent: 2em">
                车商联盟成员只需支付购车款的两成费用，即刻享受“车易订”专享车款余额采购垫资服务，让车商快速提车，降低车商的提车成本和资金压力，同时通过全线物流运输服务解决车辆运输安全问题。
                  目前，“车易订”垫资范围仅限于新车，成为稻普汽服车商联盟成员，即刻享受优先放款及保证金等方面更多优质服务。
                </div>
                <div style="text-indent: 2em">
                  随着稻普汽服车商联盟不断的完善，稻普汽服将推出更多优质完善的金融全案来满足车商联盟成员及消费者更多的业务需求。
                </div>
              </div>
            </div>
            <div class="layer-about-flex">
              <div class="layer-about-flex-top">车易购</div>
              <div class="layer-about-flex-con" style="text-align: left">
                <h5>以租代售</h5>
                <div style="text-indent: 2em">
                  稻普汽车服务集团股份有限公司为客户提供非营运类汽车融资项目，目标群体是不以盈利为目的、将汽车用于单位生产和生活服务的公司或个人。融资租赁公司依据客户选择购买车辆，客户只需支付一定的保证金和手续费，即可获得车辆使用权。以租代售产品车辆使用期间只需按期交纳租金，直至租期结束租金付清，客户支付最后的尾款即可得到汽车的所有权。
                </div>
                <h5>网约车</h5>
                <div style="text-indent: 2em">
                  稻普汽车为客户提供网约车公户司机业务，此项目是针对有“做滴滴快车、优步等网约车，专车业务”的客户推出的一种新的消费类车贷产品。融资租赁公司依据客户选择购买车辆，客户只需支付一定的保证金和手续费，即可获得车辆使用权。以租代售产品车辆使用期间只需按期交纳租金，直至租期结束租金付清，客户支付最后的尾款即可得到汽车的所有权。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="" v-if="num == 2">
        <div class="layer j_layerCon layer-white">
          <ul class="layer-product">
            <dp-Fengkong></dp-Fengkong>
          </ul>
        </div>
      </div>
    </div>
    <dp-Foot></dp-Foot>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        num: 1
      };
    },
    methods: {
      tab(index) {
        this.num = index;
      }
    }
  };
</script>
<style>
  #productIntro{
    width: 100%;
    min-width: 1200px;
  }

  .aboutCompanypadding{
    padding: 50px 0 0 0;
  }

  .layer-about {
    padding-bottom: 47px;
    overflow: hidden
  }

  .layer-about .title {
    font-size: 30px;
    line-height: 92px;
    color: #333;
  }

  .title:after {
    display: block;
    content: '';
    width: 70px;
    height: 2px;
    background-color: #00b9ef;
    margin-bottom: 20px;
  }

  .layer-about .nav {
    overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px solid #ddd
  }

  .layer-about .nav .item {
    display: block;
    overflow: hidden;
    width: 25%;
    float: left
  }

  .layer-about .nav .item .icon {
    display: block;
    width: 70px;
    height: 70px;
    float: left;
    font-size: 50px;
    color: #00b9ef;
    text-align: center;
    line-height: 70px;
  }

  .layer-about .nav .item .txt {
    margin-left: 80px;
    font-weight: 700
  }

  .layer-about .nav .item .txt .tit {
    padding-top: 6px;
    line-height: 30px;
    font-size: 22px;
    color: #666
  }

  .layer-about .nav .item .txt-inline .tit {
    padding-top: 18px
  }

  .layer-about .nav .item .txt .tip {
    font-size: 16px;
    color: #777
  }

  .layer-product{
    text-align: left;
  }

  .layer-product, .layer-product>li {
    padding-bottom: 50px;
  }

  .layer-product>li.fengkong {
    background: url(../assets/product-lay1.png) no-repeat center;
  }

  .layer-about-more{
    display: flex;
    flex-direction: row;
    padding: 0 0 20px 0;
  }

  .layer-about-flex{
    flex: 1;
    border: 1px solid #f0f0f0;
    margin-right: 15px;
    border-radius: 10px;
    text-align: center;
    min-height:280px;
  }

  .layer-about-flex-top{
    border-radius: 10px 10px 0 0;
    background: #00b9ef;
    padding: 30px 0 ;
    font-size: 25px;
    color: #fff;
  }

  .layer-about-flex-con{
    font-size: 14px;
    line-height: 2;
    padding: 15px;
  }

  .layer-about-flex-con h5{
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
    height: 30px;
    text-align: center;
    font-weight: bold;
  }

  .layer-about-flex:hover{
    box-shadow: 10px 10px 5px #f0f0f0;
    -moz-box-shadow: 10px 10px 5px #f0f0f0; /* 老的 Firefox */
  }

</style>
